<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>自定义动画</title>
  <script src="jQuery/jquery-3.7.1.js"></script>
</head>
<body>
      <button id="btn1">将下边的绿色方块放大3倍，速度慢</button>
      <button id="btn2">重置到原始大小，在500ms内完成</button>
      <div id="box" style="background:green;height:100px;width:100px;margin:6px;">
      </div>
      <script>
          $(function() {
              // 按钮1：将下边的绿色方块放大3倍，速度慢
              $("#btn1").click(function() {
                  $("#box").animate({
                      width: "300px",  // 放大到300px
                      height: "300px"  // 放大到300px
                  }, 2000); // 动画持续时间为2000毫秒（慢）
              });
              
              // 按钮2：重置到原始大小，在500ms内完成
              $("#btn2").click(function() {
                  $("#box").animate({
                      width: "100px",  // 重置回100px
                      height: "100px"  // 重置回100px
                  }, 500); // 动画持续时间为500毫秒
              });
          });

     </script>
</body>
</html>
